<template>
    <div style="width:100%;height:100%;overflow:hidden">
        <div id="map"></div>
    </div>
</template>
<script>
import flightline from "../../public/data/flightline"
import $ from "jquery"
import {TrackPlayer} from '../../js/trackplayer'
export default {
    data () {
        return {
            map:null,
            coordinates:null,
        }
    },
    mounted(){
        this.init()
    },
    methods: {
        init(){
         this.smartmapx.mapbase="http://www.smartmapx.com";
         this.smartmapx.apikey="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8";
         this.map=new this.smartmapx.Map({
              container:'map',
              mapId:'2add4026-4a41-4d42-8ae2-34604436cc4e',
              center:[107.26697,35.34806],
              zoom:3.8,
              maxZoom: 8.0,
         })

        //   this.coordinates = flightline.features[0].geometry.coordinates;
          var track1,track2,track3,track4;
          var plane1,plane2,plane3,plane4;
          this.map.on('load',()=>{
              this.startPlay(track1,flightline.features[0],'line1','transport-line1',plane1,'marker1');
              this.startPlay(track2,flightline.features[1],'line2','transport-line2',plane2,'marker2');
              this.startPlay(track3,flightline.features[2],'line3','transport-line3',plane3,'marker3');
              this.startPlay(track4,flightline.features[3],'line4','transport-line4',plane4,'marker4');
           })
        },

        startPlay(track,line,linename,layername,plane,markername){
            var track = new TrackPlayer(line,{
            speedMultiplier: 4000,
            speed: 4000,
            eachMoveDistance: this.getEachMoveLength,
            });

            this.map.addSource(linename, { type: 'geojson', data: {
                "type": "FeatureCollection",
                "features": []
            } });
            this.map.addLayer({
                "paint": {
                    "line-width": 2,
                    "line-color": "#46BEE9"
                },
                "id": layername,
                "source": linename,
                "type": "line"
            });
            track.start();
            var el = document.createElement('div');
            el.className = markername;
            el.style.backgroundImage = 'url(http://dev.smartmapx.com/map/api/img/plane.png)';
            el.style.backgroundSize = '30px 30px';
            el.style.width = '30px';
            el.style.height = '30px';
            plane = new this.smartmapx.Marker(el)
                .setLngLat(line.geometry.coordinates[0])
                .addTo(this.map);
                
            track.on(TrackPlayer.EVENT.PLAYING,  (e)=> {
            // console.log(linename);
                this.map.getSource(linename).setData(e.runLine);
                var lngLat = e.currentPosition.geometry.coordinates;
                plane.setLngLat(lngLat);
                plane.setRotate(e.heading);
            });

            track.on(TrackPlayer.EVENT.STOP,  (e)=> {
                this.map.removeSource(linename);
                this.map.removeLayer(layername);
                $('.'+markername+'').remove();
                this.startPlay(track,line,linename,layername,plane,markername);
            });
        },

        getEachMoveLength(){
            var lngLat1 = this.map.unproject([100, 100]);
            var lngLat2 = this.map.unproject([101, 101]);
            return this.getDistance(lngLat1.lat, lngLat1.lng, lngLat2.lat, lngLat2.lng);
        },

        getDistance(lat1,lng1,lat2,lng2){
            var EARTH_RADIUS=6378.137;
            var radLat1 = this.rad(lat1);
            var radLat2 = this.rad(lat2);
            var a = radLat1 - radLat2;
            var b = this.rad(lng1) - this.rad(lng2);
            var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
                Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
            s = s * EARTH_RADIUS;
            s = Math.round(s * 10000) / 10000;
            return s;
        },

        rad(d){
           return d * Math.PI / 180.0;
        }
    }
}
</script>
<style scoped>
#map{
    width: 100%;
    height: 100%;
}
</style>